<script setup>
import { ref, onMounted } from 'vue'
import { autoHover } from '@/utils/autoHover.js'
import * as echarts from 'echarts'

const props = defineProps({
    list: {
        type: Object,
        required: true,
        default: () => ({})
    }
})

const echartRef = ref()
let Chart = {}

//加载数据
onMounted(() => {
    initChart()
    getData()
    screenAdapter()
    window.addEventListener('resize', screenAdapter)
})

//初始化图表
const initChart = () => {
    Chart = echarts.init(echartRef.value)
    const initOptions = {
        tooltip: {
            show: false
        },
        legend: {
            show: false
        },
        series: [
            {
                name: '合格率',
                type: 'pie',
                percentPrecision: 0,
                radius: ['60%', '85%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    formatter: '{percent|{d}%}\n{name|{b}}',
                    rich: {
                        percent: {
                            fontSize: 18,
                            color: '#FFC70F'
                        },
                        name: {
                            fontSize: 12,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    lineStyle: {
                        width: 2
                    }
                },
                emphasis: {
                    scale: true,
                    scaleSize: 5,
                    label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'bold',
                        color: '#fff'
                    }
                },
                data: [
                    {
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#FF6251'
                                    },
                                    {
                                        offset: 1,
                                        color: '#FF6251'
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    },
                    {
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#FFC70F'
                                    },
                                    {
                                        offset: 1,
                                        color: '#FFC70F'
                                    }
                                ],
                                globalCoord: false // 缺省为 false
                            }
                        }
                    }
                ]
            }
        ]
    }
    Chart.setOption(initOptions)

    // 参数分别为：容器，配置，轮播数量，轮播间隔时间
    autoHover(Chart, 2, 3000)
}

//获取数据
const getData = () => {
    updateChart()
}

//屏幕适配
const screenAdapter = () => {
    Chart.resize()
}

// 更新数据 显示图标
const updateChart = () => {
    // 处理数据并且更新界面图表
    Chart.setOption({
        series: [
            {
                data: props.list
            }
        ]
    })
}
</script>

<template>
    <div class="chart" ref="echartRef"></div>
</template>

<style scoped lang="scss">
.chart {
    height: 90px;
    width: 90px;
}
</style>
